<template>
  <div style="margin: 120px 270px;">
    <div v-for="(items,i) in HomeStream" :key="i" style="margin-top: 60px">
      <el-row :gutter="60">
        <el-col :span="item.row" v-for="(item,j) in items.rows" :key="j">
          <div v-if="item.title === 'image'"
               class="grid-content bg-purple"
               style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center;font-size:0">
            <el-image
                :style="{height:WindowHeight,width: '40%',borderRadius: '20px 0px 0px 20px',display: 'inline-block'}"
                :src="item.url"
                fit="cover"
            >
            </el-image><div :style="{height:WindowHeight, width: '60%',borderRadius: '0px 20px 20px 0px',display: 'inline-block',fontSize:'16px',verticalAlign:'top'}">
            <h4 style="word-wrap: break-word;padding-left: 5%;padding-right: 5%;">{{item.subtitle}}</h4>
            <p style="text-indent: 30px;
            overflow-wrap: break-word;
            overflow: hidden;display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            padding-left: 5%;padding-right: 5%;">{{item.info}}</p>
            </div>
          </div>
          <div v-else-if="item.title === 'video'"
               class="grid-content bg-purple vjs-big-play-centered"
               style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center">
            <div :style="{height: WindowHeight, width: '100%', borderRadius: '20px'}">
              <video-js :options="item.videoOptions" class="video-js"
                        :style="{height: WindowHeight, width: '100%', borderRadius: '20px', overflow:'hidden'}"/>
            </div>
          </div>
          <div v-else-if="item.title === 'code'"
               class="grid-content bg-purple vjs-big-play-centered"
               style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center;font-size:0">
            <div :style="{height: WindowHeight, width: '50%', borderRadius: '20px', display: 'inline-table'}">
              <div style="vertical-align: middle;display: table-cell;">
                <el-progress type="circle" :percentage="item.percentage" :status="item.status"></el-progress>
              </div>
            </div><div :style="{height:WindowHeight, width: '50%',borderRadius: '0px 20px 20px 0px',display: 'inline-block',fontSize:'16px',verticalAlign:'top'}">
            <h4 style="word-wrap: break-word;padding-left: 5%;padding-right: 5%;">{{item.subtitle}}</h4>
            <p style="text-indent: 30px;
            overflow-wrap: break-word;
            overflow: hidden;display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            padding-left: 5%;padding-right: 5%;">{{item.info}}</p>
          </div>

          </div>
          <div v-else
               class="grid-content bg-purple vjs-big-play-centered"
               style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 20px;text-align: center">
            <div :style="{height: WindowHeight, width: '100%', borderRadius: '20px'}">
              <p>测试1</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VideoJs from '@/components/MovieLibrary/VideoJS.vue';

export default {
  name: "HomeStream",
  components: {
    VideoJs,
  },
  data() {
    return {
      HomeStream: [
        {
          rows: [{
            title: 'image',
            row: 13,
            url: 'http://www.ai-god.com:8081/static/Thumbnail/1.jpg',
            subtitle: '海边日出',
            info: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'
          },
            {
              title: 'video',
              row: 11,
              videoOptions: {
                controls: true,//开启交互，即是用户可控。
                muted: true,//开启视频时是否静音
                fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
                reload: "auto",//重载
                //其余设置根据需求添加！
                poster: 'http://www.ai-god.com:8081/static/Thumbnail/3.jpg',//视频封面
                sources: [//视频播放源，建议本地
                  {
                    src: 'http://img.yopoo.cn/banner_video.mp4',
                    type: "video/mp4"
                  }
                ]
              }
            }]
        }, {
          rows: [{
            title: 'code',
            row: 11,
            url: 'http://www.ai-god.com:8081/static/Thumbnail/1.jpg',
            percentage: 60,
            id: 0,
            subtitle: '代码完成度',
            info: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'
          },
            {
              title: 'video',
              row: 13,
              videoOptions: {
                controls: true,//开启交互，即是用户可控。
                muted: true,//开启视频时是否静音
                fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
                reload: "auto",//重载
                //其余设置根据需求添加！
                poster: 'http://www.ai-god.com:8081/static/Thumbnail/3.jpg',//视频封面
                sources: [//视频播放源，建议本地
                  {
                    src: 'http://img.yopoo.cn/banner_video.mp4',
                    type: "video/mp4"
                  }
                ]
              }
            }]
        }, {
          rows: [{
            title: 'video',
            row: 13,
            videoOptions: {
              controls: true,//开启交互，即是用户可控。
              muted: true,//开启视频时是否静音
              fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
              reload: "auto",//重载
              //其余设置根据需求添加！
              poster: 'http://www.ai-god.com:8081/static/Thumbnail/3.jpg',//视频封面
              sources: [//视频播放源，建议本地
                {
                  src: 'http://img.yopoo.cn/banner_video.mp4',
                  type: "video/mp4"
                }
              ]
            }
          }]
        }
      ],
      WindowHeight: ''
    }
  },
  //methods: {
  /*initVideo() {
    //初始化视频方法 循环列表获取每个视频的id
    // eslint-disable-next-line no-unused-vars
    this.HomeStream.map((items, i) => {
      // eslint-disable-next-line no-unused-vars
      items.rows.map((item, j) => {
        if (item.title === 'video') {
          console.log(item.id)
          // eslint-disable-next-line no-unused-vars
          let myPlayer = this.$video('myVideo' + item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px",
            //封面图
            poster: item.pic
          });
        }
      })
    })
  }*/
  //},
  mounted() {
    /*this.initVideo();*/
  },
  beforeDestroy() { //（第三步）在销毁之前拿到video实例
    /*for(let i=0;i<this.playlist.length;i++){
      this.playlist[i].dispose(); //（第四步）dispose()是官方的销毁函数
    }*/
  },
  methods: {
    getHeight() {
      this.WindowHeight = window.innerHeight / 4 + 'px'; //获取浏览器高度
      console.log(this.WindowHeight)
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight() //页面加载时执行getHeight函数
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight); //页面关闭时销毁getHeight函数
  }
}
</script>

<style scoped>
.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 42px !important;
  height: 50px !important;
  width: 50px !important;
  display: block;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin-top: -25px !important;
  margin-left: -25px !important;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 50% !important;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
</style>